<template>
  <div>
    <Header active-index="4" />
    <!-- Breadcrumb Start -->
    <div class="main-bg">
      <div class="subbox">
        <h2 class="title">荣誉榜</h2>
        <div class="navbox">
          <ul>
            <li><i class="el-icon-arrow-right" />首页</li>
            <li class="active"><i class="el-icon-arrow-right" /> 荣誉榜</li>
          </ul>
        </div>
      </div>
    </div>
    <section class="iq-blog-section light-gray-bg">
      <div class="container">
        <el-row>
          <el-col :span="24">
            <h2 class="iq-title" style="color: #0d1e67">专利</h2></el-col
          >
        </el-row>
        <div class="index myindex">
          <!-- 轮播图 -->
          <!-- Swiper -->
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <div class="iq-portfolio">
                  <img
                    :src="$imgURL + 'honor/patent1.png'"
                    class="img-fluid"
                    alt="qloud-portfolio"
                  />

                  <div class="iq-portfolio-content">
                    <div class="details-box clearfix">
                      <div class="consult-details">
                        <h5 class="link-color">
                          一种基于区块链的多能源交易与管理平台
                        </h5>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="swiper-slide">
                <div class="iq-portfolio">
                  <img
                    :src="$imgURL + 'honor/patent11.png'"
                    class="img-fluid"
                    alt="qloud-portfolio"
                  />

                  <div class="iq-portfolio-content">
                    <div class="details-box clearfix">
                      <div class="consult-details">
                        <h5 class="link-color">INNOVATION PATENT</h5>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="iq-portfolio">
                  <img
                    :src="$imgURL + 'honor/patent12.png'"
                    class="img-fluid"
                    alt="qloud-portfolio"
                  />

                  <div class="iq-portfolio-content">
                    <div class="details-box clearfix">
                      <div class="consult-details">
                        <h5 class="link-color">INNOVATION PATENT</h5>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="iq-portfolio">
                  <img
                    :src="$imgURL + 'honor/patent13.png'"
                    class="img-fluid"
                    alt="qloud-portfolio"
                  />

                  <div class="iq-portfolio-content">
                    <div class="details-box clearfix">
                      <div class="consult-details">
                        <h5 class="link-color">INNOVATION PATENT</h5>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="iq-portfolio">
                  <img
                    :src="$imgURL + 'honor/patent14.png'"
                    class="img-fluid"
                    alt="qloud-portfolio"
                  />

                  <div class="iq-portfolio-content">
                    <div class="details-box clearfix">
                      <div class="consult-details">
                        <h5 class="link-color">INNOVATION PATENT</h5>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Add Pagination -->
            <!-- 分页器 -->
            <div class="swiper-pagination" />
            <!--导航器-->
          </div>
        </div>
      </div>
    </section>
    <section class="iq-blog-section light-gray-bg">
      <div class="container">
        <el-row>
          <el-col :span="24">
            <h2 class="iq-title" style="color: #0d1e67">论文</h2></el-col
          >
        </el-row>
        <div class="index myindex">
          <!-- 轮播图 -->
          <!-- Swiper -->
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <div class="iq-portfolio">
                  <img
                    :src="$imgURL + 'honor/paper1.png'"
                    class="img-fluid"
                    alt="qloud-portfolio"
                  />

                  <div class="iq-portfolio-content">
                    <div class="details-box clearfix">
                      <div class="consult-details">
                        <h5 class="link-color">
                          基于私有区块链的去中心化点对点多能源交易系统研制
                        </h5>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="swiper-slide">
                <div class="iq-portfolio">
                  <img
                    :src="$imgURL + 'honor/paper2.png'"
                    class="img-fluid"
                    alt="qloud-portfolio"
                  />

                  <div class="iq-portfolio-content">
                    <div class="details-box clearfix">
                      <div class="consult-details">
                        <h5 class="link-color">
                          基于区块链的表后微网系统及其点对点能量块交易模型设计
                        </h5>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="iq-portfolio">
                  <img
                    :src="$imgURL + 'honor/paper3.png'"
                    class="img-fluid"
                    alt="qloud-portfolio"
                  />

                  <div class="iq-portfolio-content">
                    <div class="details-box clearfix">
                      <div class="consult-details">
                        <h5 class="link-color">
                          基于区块链社群思维的电力系统调频模型
                        </h5>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="iq-portfolio">
                  <img
                    :src="$imgURL + 'honor/paper4.png'"
                    class="img-fluid"
                    alt="qloud-portfolio"
                  />

                  <div class="iq-portfolio-content">
                    <div class="details-box clearfix">
                      <div class="consult-details">
                        <h5 class="link-color">
                          A Decentralized Market Model for a Microgrid with
                          Carbon Emission Rights
                        </h5>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="iq-portfolio">
                  <img
                    :src="$imgURL + 'honor/paper5.png'"
                    class="img-fluid"
                    alt="qloud-portfolio"
                  />

                  <div class="iq-portfolio-content">
                    <div class="details-box clearfix">
                      <div class="consult-details">
                        <h5 class="link-color">
                          Energy Block-based Peer-to-Reer Contract Trading with
                          Secure Multi-party Computation in Nanogrid
                        </h5>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="iq-portfolio">
                  <img
                    :src="$imgURL + 'honor/paper6.png'"
                    class="img-fluid"
                    alt="qloud-portfolio"
                  />

                  <div class="iq-portfolio-content">
                    <div class="details-box clearfix">
                      <div class="consult-details">
                        <h5 class="link-color">
                          Evolutionary Game Based Demand Response Biding
                          Strategy for End-Users Using Q-Learning and Compound
                          Differential Evolution
                        </h5>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="iq-portfolio">
                  <img
                    :src="$imgURL + 'honor/paper7.png'"
                    class="img-fluid"
                    alt="qloud-portfolio"
                  />

                  <div class="iq-portfolio-content">
                    <div class="details-box clearfix">
                      <div class="consult-details">
                        <h5 class="link-color">
                          Coordinative Optimization between Multiple Data Center
                          Operators and a System Operator Based on Two-level
                          Distributed Scheduling Algorithm
                        </h5>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Add Pagination -->
            <!-- 分页器 -->
            <div class="swiper-pagination" />
            <!--导航器-->
          </div>
        </div>
      </div>
    </section>
    <section class="iq-blog-section light-gray-bg">
      <div class="container">
        <el-row>
          <el-col :span="24">
            <h2 class="iq-title" style="color: #0d1e67">软著</h2></el-col
          >
        </el-row>
        <div class="index myindex">
          <!-- 轮播图 -->
          <!-- Swiper -->
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <div class="iq-portfolio">
                  <img
                    :src="$imgURL + 'honor/soft1.png'"
                    class="img-fluid"
                    alt="qloud-portfolio"
                  />

                  <div class="iq-portfolio-content">
                    <div class="details-box clearfix">
                      <div class="consult-details">
                        <h5 class="link-color">
                          XJTU能源区块链综合服务平台V1.0
                        </h5>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="swiper-slide">
                <div class="iq-portfolio">
                  <img
                    :src="$imgURL + 'honor/soft2.png'"
                    class="img-fluid"
                    alt="qloud-portfolio"
                  />

                  <div class="iq-portfolio-content">
                    <div class="details-box clearfix">
                      <div class="consult-details">
                        <h5 class="link-color">
                          区块链环境下多能源交易软件V1.0
                        </h5>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="iq-portfolio">
                  <img
                    :src="$imgURL + 'honor/soft3.png'"
                    class="img-fluid"
                    alt="qloud-portfolio"
                  />

                  <div class="iq-portfolio-content">
                    <div class="details-box clearfix">
                      <div class="consult-details">
                        <h5 class="link-color">
                          区块链和数据库数据交互软件V1.0
                        </h5>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Add Pagination -->
            <!-- 分页器 -->
            <div class="swiper-pagination" />
            <!--导航器-->
          </div>
        </div>
      </div>
    </section>
    <Footer />
  </div>
</template>
<script>
import Header from "@/components/header/index.vue";
import Footer from "@/components/footer/index.vue";
// 引入swiper插件的js
import Swiper from "swiper";
export default {
  name: "Index",
  components: {
    Header,
    Footer,
  },
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.myswiper();
    });
  },
  methods: {
    myswiper() {
      var swiper = new Swiper(".swiper-container", {
        loop: true, // 循环模式选项
        autoHeight: "true", // 开启自适应高度,容器高度由slide高度决定
        // 分页器
        pagination: {
          el: ".swiper-pagination",
          clickable: true, // 分页器按钮可点击
        },

        slidesPerView: 4,
        // 导航器
        // navigation: {
        //   nextEl: '.swiper-button-next',
        //   prevEl: '.swiper-button-prev',
        // }
      });
    },
  },
};
</script>

<style>
.swiper-container {
  margin: 20px auto;
}
</style>
